import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../store'
import { useEffect } from 'react'
import { useParams } from 'umi'
import PageLoading from '@/components/Global/PageLoading'
import dayjs from 'dayjs'
import { getQuestionByType } from '../components'
import { Empty } from 'antd-mobile'

export default observer(() => {
    const store = useLocalObservable(() => new Store())
    const { barriersInfo, getBarriersInfo, resetBarriers } = store
    const { id }: any = useParams()

    useEffect(() => {
        getBarriersInfo(id)
        return () => {
            resetBarriers()
        }
    }, [])

    if (!Object.keys(barriersInfo).length) {
        return <PageLoading />
    }

    const { detail } = barriersInfo

    if (Array.isArray(detail)) {
        return <Empty description="暂无数据" />
    }

    const { items, originalData } = detail

    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <div className={styles.header_box}>
                    <div>
                        <div className={styles.title}>{barriersInfo?.name}</div>
                        <div className={styles.tips}>最近一次编辑 {dayjs(barriersInfo.detail.updatedAt).format('YYYY-MM-DD HH:mm')}</div>
                    </div>
                </div>
            </div>
            <div className={styles.content_wrapper}>
                {items
                    .filter((item: any) => item.type !== 7)
                    .map((item: any, idx: number) => {
                        const { type, code, scheme } = item
                        const Comp = getQuestionByType(type)
                        if (!Comp) {
                            return null
                        }
                        return <Comp key={code} scheme={scheme} answers={originalData[code]} idx={idx + 1} />
                    })}
            </div>
        </div>
    )
})
